<template>
	<view>
		<view >
			<cu-custom bgColor="bg-blue" :isBack="true">
				<!-- 顶部栏 -->
				<block slot="content">
					<text v-if="type == 1">学校合作申请</text>
					<text v-else-if="type == 10">系统通知</text>
					<text v-else-if="type == 3">实训学生申请</text>
				</block>
			</cu-custom>
			<block>
				<view class="box_info" v-if="list!=''">
					<view class="box" v-for="(item,index) in list" :key="index">
						<!-- 学校合作申请 -->
						<block v-if="item.type == 1">
							<view class="join flex">
								<view class="hezuo">合作申请</view>
								<view class="time">{{timeToStr(item.add_time,'MM-dd hh:mm')}}</view>
							</view>
							<view class="touxiang flex">
								<view class="cu-avatar" style="background-image:url(https://bkimg.cdn.bcebos.com/pic/e824b899a9014c0848f8f316007b02087af4f446?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg);"></view>
								<view class="center_box">
									<view class="shcool_boxtext">{{item.nickname}}</view>
									<view class="information_text">{{item.content}}</view>
								</view>
							</view>
							
							<view class="btn flex justify-end" v-if="item.is_active!=1">
								<view class="lose" @tap="showModal(item.notice_id)" data-target="Modal">拒绝</view>
								<view class="pass" @tap="showModa2(item.notice_id)" data-target="Moda2">通过</view>
							</view>
							
							<view class="btn flex justify-end" v-if="item.is_active==1">
								{{item.active_text}}
							</view>
						</block>
						<!-- 系统通知 -->
						<block v-else-if="item.type == 10">
							<view class="join flex">
								<view class="hezuo">{{item.nickname}}</view>
								<view class="time">{{timeToStr(item.add_time,'MM-dd')}}</view>
							</view>
							<view class="jieguo">{{item.content}}</view>
						</block>
						
						<!-- 学生加入 -->
						<block v-else-if="item.type == 3" >
							<view class="join flex">
								<view class="hezuo">学生合作加入</view>
								<view class="time">{{timeToStr(item.add_time,'MM-dd hh:mm')}}</view>
							</view>
							<view class="touxiang flex" @tap="to_student(item.student_id)">
								<image class="cu-avatar" :src="item.avatar"></image>
								<view class="center_box">
									<view class="shcool_boxtext">{{item.nickname}}</view>
									<view class="information_text">{{item.content}}</view>
								</view>
							</view>
							
							<view class="btn flex justify-end" v-if="item.is_active!=1">
								<view class="lose" @tap="showModal(item.notice_id)">拒绝</view>
								<view class="pass" @tap="showModa2(item.notice_id)">通过</view>
							</view>
							
							<view class="btn flex justify-end" v-if="item.is_active==1">
								{{item.active_text}}
							</view>
						</block>
					</view>
					
					<!-- 拒绝弹窗 -->
					<view class="cu-modal" :class="modalName=='Modal'?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">拒绝原因</view>
								<view class="action" @tap="hideModal">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<textarea class="wenben" placeholder="请输入您的拒绝原因" v-model="active_feedback"
									maxlength="-1"></textarea>
								<view class="submit" @tap="submit(list.job_id)">提交</view>
							</view>
						</view>
					</view>
					<!-- 通过弹窗 -->
					<view class="cu-modal" :class="modalName=='Moda2'?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">温馨提示</view>
								<view class="action" @tap="hideModa2">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<view class="quizBox">是否确定通过？</view>
								<view class="flex btn_box ">
									<view class="cancel" @tap="hideModa2">取消</view>
									<view class="okBox" @tap="pass(list.job_id)">确定</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nodata" v-if="list==''">暂无通知</view>
			</block>
			
		</view>
		
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				type:0,
				modalName: null,
				active_feedback: '',
				pass_active:1,
				repass_active:-1,
				page:1,
				page_size:20,
				list:[],
				timeToStr:timeToStr,
				notice_id:0,
				job_id:0
			}
		},
		onLoad(opthion) {
			appLogin((user_info)=>{
				console.log(user_info)
				this.type = opthion.type
				this.displayList()
				console.log(this.type)
			})
		},
		methods: {
			to_student(student_id){
				console.log(student_id)
				uni.navigateTo({
					url: '../student/resume?student_id=' + student_id
				});         
			},
			//取消窗口
			showModal(notice_id) {
				this.opinion = ''
				this.notice_id = notice_id
				this.modalName = 'Modal'
			},
			hideModal(e) {
				this.modalName = null
			},
			//确定窗口
			showModa2(notice_id) {
				this.notice_id = notice_id
				this.modalName = "Moda2"
			},
			hideModa2(e) {
				this.modalName = null
			},
			//拒绝提交点击时间
			submit(job_id) {
				if (!this.active_feedback) {
					uni.showToast({
						title: '请输入您的拒绝理由',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				httpPost({
					url:'/api/company/notice_handle',
					data:{
						notice_id:this.notice_id,
						active:this.repass_active,
						active_feedback:this.active_feedback
					}
				}).then((res) => {
						console.log(this.job_id)
						this.list = []
						this.displayList()
				})
				this.hideModal()
			},
			//同意点击提交事件
			pass(job_id){
				httpPost({
					url:'/api/company/notice_handle',
					data:{
						notice_id:this.notice_id,
						active:this.pass_active,
						job_id:this.job_id
					}
				}).then((res) => {
						console.log(res)
						this.hideModa2()
						this.list = []
						this.displayList()
				})
			},
			//显示接口信息
			displayList(){
				httpGet({
					url:'/api/company/notice_list',
					data:{
						type:this.type,
						page:this.page,
						page_size:this.page_size,
						job_id:this.job_id
					}
				}).then((res) => {
						console.log(res)
						console.log(res.result)
						this.list = res.result.list
				})
			}
		}
	}
</script>

<style>
	.page {
		background-color: rgb(244, 244, 244);
	}

	.box {
		background-color: rgb(255, 255, 255);
		border-radius: 18rpx;
		margin-top: 36rpx;
		margin-left: 36rpx;
		margin-right: 36rpx;
		padding-bottom: 54rpx;
		margin-bottom: -13rpx;
	}

	.join {
		padding-top: 24rpx;
		padding-bottom: 22rpx;
		padding-left: 33rpx;
		border: solid 1rpx rgb(246, 246, 246);
	}

	.hezuo {
		color: rgb(51, 51, 51);
		font-size: 30rpx;
	}

	.time {
		position: absolute;
		right: 72rpx;
		font-size: 28rpx;
		color: rgb(161, 161, 161);
	}

	.cu-avatar {
		width: 114rpx;
		height: 114rpx;
		border-radius: 100px;
		margin-left: 36rpx;
		margin-top: 44rpx;
	}

	.center_box {
		margin-left: 44rpx;
		margin-top: 50rpx;
	}

	.shcool_boxtext {
		color: rgb(51, 51, 51);
		font-size: 30rpx;
	}

	.information_text {
		color: rgb(116, 116, 116);
		font-size: 30rpx;
		margin-top: 16rpx;
		white-space: pre-wrap;
	}

	.btn {
		margin-top: 32rpx;
		margin-right: 36rpx;
	}

	.lose {
		width: 192rpx;
		height: 64rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		border-radius: 80rpx;
		border: solid 1rpx rgb(153, 153, 153);
		background-color: rgb(255, 255, 255);
		color: rgb(153, 153, 153);
		text-align: center;
		margin-right: 22rpx;
	}

	.pass {
		width: 192rpx;
		height: 64rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		border-radius: 80rpx;
		border: solid 1rpx;
		background-color: rgb(59, 115, 246);
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.date {
		text-align: center;
		color: rgb(144, 144, 144);
		margin-top: 36rpx;
	}

	.box {
		background-color: rgb(255, 255, 255);
		margin-top: 32rpx;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		padding-bottom: 54rpx;
	}

	.ziti {
		font-size: 34rpx;
		color: rgb(0, 0, 0);
		padding-top: 50rpx;
		padding-left: 30rpx;
	}

	.jieguo {
		font-size: 32rpx;
		color: rgb(102, 102, 102);
		padding-top: 28rpx;
		padding-left: 30rpx;
	}

	.wenben {
		width: 100%;
		text-align: left;
	}

	.submit {
		background-color: rgb(59, 115, 246);
		border-radius: 30rpx;
		height: 68rpx;
		color: rgb(255, 255, 255);
		font-size: 32rpx;
		line-height: 70rpx;
	}
	
	.okBox{
		width: 160rpx;
		height: 54rpx;
		background-color: #3b73f6;
		border-radius: 90rpx;
		color: #FFF6EC;
		line-height: 54rpx;
	}
	
	.cancel{
		width: 160rpx;
		height: 54rpx;
		background-color: #FFFFFF;
		border-radius: 90rpx;
		color: #999999;
		border-color: #999999;
		border-style: solid;
		border-width: 1rpx;
		line-height: 54rpx;
	}
	
	.btn_box{
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.quizBox{
		color: #333333;
		font-size: 35rpx
	}
	.touxiang .cu-avatar{
		flex-shrink: 0;
	}
	.nodata{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		font-size: larger;
	}

</style>
